<template>
    <!-- 底部部分 -->
    <footer class="footer" v-if="list.length > 0">
      <!-- 统计的是list中剩余isDone为false的情况，正在进行中，未完成的任务 -->
      <span class="todo-count"><strong>{{ leftCount }}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a @click="filter('all')" 
           :class="{selected:type==='all'}" href="#/">全部</a>
        </li>
        <li>
          <a @click="filter('active')" 
            :class="{selected:type==='active'}" href="#/active">进行中</a>
        </li>
        <li>
          <a @click="filter('completed')" 
           :class="{selected:type==='completed'}" href="#/completed">已完成</a>
        </li>
      </ul>
      <!-- 如果list中有已完成的，就显示这个按钮 -->
      <button class="clear-completed" v-if="isShowBtn" @click="clear">清除已完成</button>
    </footer>
</template>

<script>
export default {
    data(){
      return {
        // all active completed
        // 声明一个type变量存当前选中哪一个a标签
        // type:'all'
      }
    },
    props:{
      list:{
        type:Array,
        required:true
      },
      // type:String,
      type:{
        type:String,
        required:true
      }
    },
    computed:{
      // 剩余的任务数 和 length
      leftCount(){
        // 看list中isDone等于false的情况有多少个 
        // const arr = this.list.filter(el => el.isDone === false)
        // return arr.length
        return this.list.filter(el => el.isDone === false).length
      },
      isShowBtn(){
        // 如果isDone为true，有一个或者多个就返回true
        // 1. 方式一
        // return this.list.filter(el => el.isDone === true).length > 0
        // 2. 方式二  arr.some 只要有一个已完成就OK
        // return this.list.some(el => el.isDone === true)
        return this.list.some(el => el.isDone)
      }
    },
    methods:{
      clear(){
        // 告诉父组件，删除已完成的任务
        this.$emit('clear')
      },
      filter(val){
        // this.type = val
        // type是父组件传过来的props，不能直接修改
        this.$emit('changeType', val)
      }
    }
}

// 5.底部高亮  核心思路 数据驱动视图 
// 1. ==> 声明了一个type变量，来表示当前选中的是那个a标签
// 2. 结构上 绑定类名 class
//  <a :class="{selected:type==='all'}"></a>
//  <a :class="{selected:type==='active'}"></a>
//  <a :class="{selected:type==='completed'}"></a>

// 3. 点击的时候 @click 修改type的状态
// filter(type){
//   this.type = type
// }


// 6. 状态提升，考虑到type的值，不仅影响自己这个TodoFooter组件，还影响TodoMain这个组件
//   
//   1. 将type数据做一个状态提升 => 给公共的父组件设置type
//   2. 父组件通过属性传给子组件，子组件props接收
//   3. 子组件触发 this.$emit('changeType', val) 
</script>

<style>

</style>